<template>
	<div class="md:flex">
		<template v-for="(item, index) in growCardList" :key="item.title">
			<Card size="small" :loading="loading" class="card_name md:w-1/5 w-full !md:mt-0 !mt-5" :class="[index + 1 < 5 && '!md:mr-5']" :canExpan="false">
				<div class="card_top">
					<img :src="item.icon" alt="" />
					<div>{{ item.title }}</div>
				</div>

				<div class="py-4 px-4 flex card_total">
					<CountTo :startVal="1" :endVal="item.value" class="text-2xl" />
					<span>{{ item.action }}</span>
				</div>

				<div class="flex justify-between card_bi_jia">
					<div class="card_bi card_margin">
						<span class="card_bi_tit" style="display: flex;">上年
							<span class="card_bi_count_up" style="margin-left: 10px;">
								<CountTo :startVal="1" :endVal="item.chain" /> <span>{{ item.action }}</span></span>
						</span>
						<div class=""></div>
						<!-- <img class="card_img_up" :src="img6" alt="" /> -->
						<!-- <template v-if="item.chain < 0">
							<div class="card_bi_count_down"><CountTo :startVal="1" :endVal="item.chain" /> <span>%</span></div>
							<img :src="img7" alt="" />
						</template> -->
					</div>
					<div class="card_bi">
						<span class="card_bi_tit">同比</span>
						<template v-if="item.yearonyear > 0">
							<div class="card_bi_count_up"><CountTo :startVal="1" :endVal="item.yearonyear" /> <span>%</span></div>
							<img class="card_img_up" :src="img6" alt="" />
						</template>
						<template v-if="item.yearonyear < 0">
							<div class="card_bi_count_down"><CountTo :startVal="1" :endVal="item.yearonyear" /> <span>%</span></div>
							<img :src="img7" alt="" />
						</template>
					</div>
				</div>
			</Card>
		</template>
	</div>
</template>
<script lang="ts" setup>
	import {CountTo} from '/@/components/CountTo/index';
	import {Icon} from '/@/components/Icon';
	import {Tag, Card} from 'ant-design-vue';
	import img6 from '@/assets/images/overviewAnalysis/u11.svg';
	import img7 from '@/assets/images/overviewAnalysis/u12.svg';
	import img1 from '@/assets/images/overviewAnalysis/u5.png';
	import img2 from '@/assets/images/overviewAnalysis/u33.png';
	import img3 from '@/assets/images/overviewAnalysis/u46.png';
	import img4 from '@/assets/images/overviewAnalysis/u59.png';
	import img5 from '@/assets/images/overviewAnalysis/u75.svg';
	const props = defineProps({
		GrowCardData: {
			type: Object,
			default: () => {
				return {};
			},
		},
	});
	const growCardList = ref([
		{
			title: '单次平均充电量',
			icon: img1,
			value: 54.6,
			total: 120000,
			chain: 66,
			yearonyear: 12.5,
			color: 'green',
			action: '度',
		},
		{
			title: '单次平均充电时长',
			icon: img2,
			value: 47.1,
			total: 500000,
			chain: 66,
			yearonyear: 12.5,
			color: 'blue',
			action: '分钟',
		},
		{
			title: '月均充电次数',
			icon: img3,
			value: 6.4,
			total: 120000,
			chain: 66,
			yearonyear: 12.5,
			color: 'orange',
			action: '次',
		},
		{
			title: '平均充电起始SOC',
			icon: img4,
			value: 15.6,
			total: 50000,
			chain: 66,
			yearonyear: 12.5,
			color: 'purple',
			action: '%',
		},
		{
			title: '平均充电结束SOC',
			icon: img5,
			value: 95.7,
			total: 50000,
			chain: 66,
			yearonyear: 12.5,
			color: 'purple',
			action: '%',
		},
	]);
	watch(
		() => props.GrowCardData,
		(oldval, newVal) => {
			console.log('watch-GrowCardData', oldval, newVal, props.GrowCardData);
      initgrowCardList(props.GrowCardData);
		},
		{immediate: true, deep: true}
	);
  function initgrowCardList(GrowCardData) {
    console.log('props.GrowCardData',GrowCardData);
		growCardList.value[0].value =GrowCardData.avgChargingVolume || 0;
		growCardList.value[0].chain =GrowCardData.avgChargingVolumeLastYear || 0;
		growCardList.value[0].yearonyear =GrowCardData.avgChargingVolumeChangeRate || 0;

		growCardList.value[1].value =GrowCardData.avgChargingDuration || 0;
		growCardList.value[1].chain =GrowCardData.avgChargingDurationLastYear || 0;
		growCardList.value[1].yearonyear =GrowCardData.avgChargingDurationChangeRate || 0;

		growCardList.value[2].value =GrowCardData.monthlyChargingCount || 0;
		growCardList.value[2].chain =GrowCardData.monthlyChargingCountLastYear || 0;
		growCardList.value[2].yearonyear =GrowCardData.monthlyChargingCountChangeRate || 0;

		growCardList.value[3].value =GrowCardData.avgStartSOC || 0;
		growCardList.value[3].chain =GrowCardData.avgStartSOCLastYear || 0;
		growCardList.value[3].yearonyear =GrowCardData.avgStartSOCChangeRate || 0;

		growCardList.value[4].value =GrowCardData.avgEndSOC || 0;
		growCardList.value[4].chain =GrowCardData.avgEndSOCLastYear || 0;
		growCardList.value[4].yearonyear =GrowCardData.avgEndSOCChangeRate || 0;
	console.log('growCardListgrowCardList', growCardList.value);

  }
	onMounted(() => {

	});
</script>

<style lang="less" scoped>
	.card_top {
		display: flex;
		align-items: center;
		font-size: 1rem;
		img {
			width: 1.25rem;
			height: 1.25rem;
			margin-right: 0.625rem;
		}
	}
	.card_total {
		display: flex;
		align-items: baseline;
		.text-2xl {
			font-size: 2.5rem;
			margin-left: 0.875rem;
			font-weight: 700;
			color: rgb(51, 51, 51);
			margin-right: 1.5625rem;
		}
	}
	.card_img_up {
		transform: scaleY(-1);
	}
	.card_bi_jia {
		padding-left: 1.875rem;
		align-items: center;
		.card_bi {
			width: 47%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// background: #ccc;
			img {
				height: 0.75rem;
				width: 0.75rem;
				margin-top: 0.1875rem;
			}
		}
		.card_margin {
			margin-right: 6%;
		}
		.card_bi_count_up {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: rgb(255, 148, 71);
			// margin-right: 1rem;
		}
		.card_bi_count_down {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: rgb(48, 231, 187);
			// margin-right: 1rem;
		}
		.card_bi_tit {
			// margin-right: .625rem;
		}
	}

	.card_name {
		min-width: 15rem;
	}
</style>
